<template>
    <div class="tabbars">
    <ul>
        <router-link :to="{name: 'home'}" tag="li" exact>
            <div>
                <i class="icon iconfont icon-home"></i>
            </div>
            <div>首页</div>
        </router-link>
        <router-link :to="{name: 'product'}" tag="li">
            <div>
                <i class="icon iconfont icon-product"></i>
            </div>
            <div>产品</div>
        </router-link>
        <!-- <router-link :to="{name: 'c2c'}" tag="li">
            <div>
                <i class="icon iconfont icon-category"></i>
            </div>
            <div>C2C</div>
        </router-link> -->
        <router-link :to="{name: 'mine'}" tag="li">
            <div>
                <i class="icon iconfont icon-mine"></i>
            </div>
            <div>我的</div>
        </router-link>
    </ul>
    </div>
</template>
<script>
</script>
<style lang="less" scoped>
.tabbars {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #dcdcdc;
    & > ul,
    & > ul > li {
        margin: 0;
        padding: 0;
    }
    ul {
        display: table;
        width: 100%;
        & > li {
        text-align: center;
        font-size: 16px;
        display: table-cell;
        padding: 8px 12px;
        cursor: pointer;
        &.router-link-active {
            color: #ff976a;
        }
        & > div {
            font-size: 14px;
            & > i {
            font-size: 30px;
            }
        }
        }
    }
}
</style>